import { useForm } from 'react-hook-form'

import toast from 'react-hot-toast'
import Button from '../../ui/Button'
import FileInput from '../../ui/FileInput'
import Form from '../../ui/Form'
import FormRow from '../../ui/FormRow.jsx'
import Input from '../../ui/Input'
import Textarea from '../../ui/Textarea'
import { useCreateCabin } from './useCreateCabin.js'
import { useEditCabin } from './useEditCabin.js'

function CreateCabinForm({ cabinToEdit, onCloseModal }) {
	const { id: editId, ...editValues } = cabinToEdit || {}

	const { register, handleSubmit, reset, getValues, formState } = useForm({
		defaultValues: editValues
	})
	const { errors } = formState
	const { createCabin, isCreating } = useCreateCabin()
	const { editCabin, isEditing } = useEditCabin()

	function onSubmit(data) {
		const image = typeof data.image === 'string' ? data.image : data.image[0]

		if (editId) {
			editCabin(
				{ newCabinData: { ...data, image }, id: editId },
				{
					onSuccess: () => {
						reset()
						onCloseModal?.()
						toast.success('Cabin updated successfully')
					}
				}
			)
		} else {
			createCabin(
				{ newCabinData: { ...data, image } },
				{
					onSuccess: () => {
						reset()
						onCloseModal?.()
						toast.success('Cabin created successfully')
					}
				}
			)
		}
	}

	const isWorking = isCreating || isEditing

	return (
		<Form
			onSubmit={handleSubmit(onSubmit)}
			type={onCloseModal ? 'modal' : 'regular'}
		>
			<FormRow label='Cabin name' error={errors?.name?.message}>
				<Input
					type='text'
					id='name'
					disabled={isWorking}
					{...register('name', { required: 'This field is required' })}
				/>
			</FormRow>

			<FormRow label='Maximum capacity' error={errors?.maxCapacity?.message}>
				<Input
					type='number'
					id='maxCapacity'
					disabled={isWorking}
					{...register('maxCapacity', {
						required: 'This field is required',
						min: {
							value: 1,
							message: 'Minimum capacity is 1'
						}
					})}
				/>
			</FormRow>

			<FormRow label='Regular price' error={errors?.regularPrice?.message}>
				<Input
					type='number'
					id='regularPrice'
					disabled={isWorking}
					{...register('regularPrice', {
						required: 'This field is required',
						min: {
							value: 10,
							message: 'Minimum price is 10'
						}
					})}
				/>
			</FormRow>

			<FormRow label='Discount' error={errors?.discount?.message}>
				<Input
					type='number'
					id='discount'
					disabled={isWorking}
					defaultValue={0}
					{...register('discount', {
						required: 'This field is required',
						validate: (value) => {
							if (value > getValues().regularPrice) {
								return `Discount cannot be greater than ${getValues().regularPrice}`
							}
						}
					})}
				/>
			</FormRow>

			<FormRow label='Description' error={errors?.description?.message}>
				<Textarea
					type='number'
					id='description'
					defaultValue=''
					disabled={isWorking}
					{...register('description', { required: 'This field is required' })}
				/>
			</FormRow>

			<FormRow label='Cabin photo'>
				<FileInput
					{...register('image')}
					id='image'
					accept='image/*'
					type={'file'}
				/>
			</FormRow>

			<FormRow>
				{/* type is an HTML attribute! */}
				<Button
					variation='secondary'
					type='reset'
					onClick={() => onCloseModal?.()}
				>
					Cancel
				</Button>
				<Button disabled={isWorking}>
					{editId ? 'Edit cabin' : 'Create cabin'}
				</Button>
			</FormRow>
		</Form>
	)
}

export default CreateCabinForm
